<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<link rel="stylesheet" href="css/main.css">
		<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
		<script>
			// 请写出实现的代码：
			// 提示：基本原理是改变列表容器的left值，根据点击的tab动画运动到对应的left值
			$(function() {
				$('input').click(function() {
					$(this).addClass('current').siblings().removeClass('current')
					// 获取当前我点击这个对象的索引值
					//					alert($(this).index())
					/**
					 * 0 0px
					 * 1 -500px
					 * 2 -1000px
					 */
                    // 注意：如果想做动画的时候，必须要把上一个动画先停止，然后在写下一个动画
					$('.tab_cons').stop().animate({
						'left': $(this).index() * -500 + 'px'
					}, 2000)
				})
			})
		</script>
	</head>

	<body>
		<div class="tab_wrap">
			<div class="tab_btns">
				<input type="button" value="公司新闻" class="current">
				<input type="button" value="国际新闻">
				<input type="button" value="行业动态">
			</div>
			<div class="tab_cons">
				<ul>
					<li>
						<a href="#">公司新闻G5将现场观战 网友调侃詹杜争吵为发际线</a><span>06-11 20:39</span></li>
					<li>
						<a href="#">帕楚利亚谈与香珀特冲突：就是普通争球而已</a><span>06-11 18:25</span></li>
					<li>
						<a href="#">两战78分！詹皇狂赞欧文：他注定为大场面而生</a><span>06-11 18:23</span></li>
					<li>
						<a href="#">利文斯顿：冲突很常见 注意力要放在比赛中</a><span>06-11 18:10</span></li>
					<li>
						<a href="#">球鞋收入榜：詹皇仅乔丹1/3 哈登第5库里第6</a><span>06-11 16:42</span></li>
					<li>
						<a href="#">科勒称若有G6会再去现场 小范：人们应向她道歉</a><span>06-11 09:56</span></li>
				</ul>
				<ul>
					<li>
						<a href="#">国际新闻G5将现场观战 网友调侃詹杜争吵为发际线</a><span>06-11 20:39</span></li>
					<li>
						<a href="#">帕楚利亚谈与香珀特冲突：就是普通争球而已</a><span>06-11 18:25</span></li>
					<li>
						<a href="#">两战78分！詹皇狂赞欧文：他注定为大场面而生</a><span>06-11 18:23</span></li>
					<li>
						<a href="#">利文斯顿：冲突很常见 注意力要放在比赛中</a><span>06-11 18:10</span></li>
					<li>
						<a href="#">球鞋收入榜：詹皇仅乔丹1/3 哈登第5库里第6</a><span>06-11 16:42</span></li>
					<li>
						<a href="#">科勒称若有G6会再去现场 小范：人们应向她道歉</a><span>06-11 09:56</span></li>
				</ul>
				<ul>
					<li>
						<a href="#">行业动态G5将现场观战 网友调侃詹杜争吵为发际线</a><span>06-11 20:39</span></li>
					<li>
						<a href="#">帕楚利亚谈与香珀特冲突：就是普通争球而已</a><span>06-11 18:25</span></li>
					<li>
						<a href="#">两战78分！詹皇狂赞欧文：他注定为大场面而生</a><span>06-11 18:23</span></li>
					<li>
						<a href="#">利文斯顿：冲突很常见 注意力要放在比赛中</a><span>06-11 18:10</span></li>
					<li>
						<a href="#">球鞋收入榜：詹皇仅乔丹1/3 哈登第5库里第6</a><span>06-11 16:42</span></li>
					<li>
						<a href="#">科勒称若有G6会再去现场 小范：人们应向她道歉</a><span>06-11 09:56</span></li>
				</ul>
			</div>
		</div>
	</body>

</html>